<template>
  <div class="yd-dialog-black-mask">
    <div class="yd-confirm">
      <div class="yd-confirm-hd"><strong class="yd-confirm-title"
                v-html="title"></strong></div>
      <div class="yd-confirm-bd"
           v-html="mes"></div>
      <template v-if="typeof opts == 'function'">
        <div class="yd-confirm-ft">
          <a href="javascript:;"
             class="yd-confirm-btn default"
             @click.stop="closeConfirm(false)">取消</a>
          <a href="javascript:;"
             class="yd-confirm-btn primary"
             @click.stop="closeConfirm(false, opts)">确定</a>
        </div>
      </template>
      <template v-else>
        <div class="yd-confirm-ft">
          <a href="javascript:;"
             class="yd-confirm-btn"
             :key="key"
             v-for="item, key in opts"
             :class="typeof item.color == 'boolean' ? (item.color ? 'primary' : 'default') : ''"
             :style="{color: item.color}"
             @click.stop="closeConfirm(item.stay, item.callback)">{{item.txt}}</a>
        </div>
      </template>
    </div>
  </div>
</template>

<script type="text/babel">
export default {
  name: 'yd-confirm-view',
  props: {
    title: String,
    mes: String,
    opts: {
      type: [Array, Function],
      default: () => {}
    }
  }
};
</script>
